<template>
  <yd-layout class="m-goods-srh">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" :title="title" height="0.88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <!-- 筛选列表 tab -->
    <div slot="top" class="m-search-tab-list screen">
      <button :class="{active: getGoodsListParams.orderBy == 'goods_salenum'}" @click="getGoodsListType('goods_salenum')">销量</button>
      <button :class="{active: getGoodsListParams.orderBy == 'addTime'}" @click="getGoodsListType('addTime')">新品</button>
      <button :class="{active: getGoodsListParams.orderBy == 'goods_current_price'}" @click="onSearchByPrice('goods_current_price')">价格
        <span class="t" :class="{cur: getGoodsListParams.orderType == 'asc' && getGoodsListParams.orderBy == 'goods_current_price'}"></span>
        <span class="b" :class="{cur: getGoodsListParams.orderType == 'desc' && getGoodsListParams.orderBy == 'goods_current_price'}"></span>
      </button>
      <button @click="show = true">筛选
        <img src="../../assets/search/btn_screening.png" alt="">
      </button>
    </div>

    <!-- 右侧筛选 -->
    <yd-popup v-model="show" position="right" width="90%">
      <div class="popup-scroll">
        <div class="screen-row">
          <div class="screen-title">价格区间（元）</div>
          <div class="screen-content">
            <input type="tel" v-model="lowest" placeholder="最低价" maxlength="6"/>
            <div class="line"></div>
            <input type="tel" v-model="highest" placeholder="最高价" maxlength="6"/>
          </div>
        </div>
        <div class="screen-row" v-for="(items, indexParent) in screenList" :key="indexParent">
          <div class="screen-title">{{items.name}}
            <span v-if="items.value.split(',').length > 6" @click="showMoreBtn(indexParent, items)">更多
              <img src="../../assets/btn_down.png" alt="" v-show="!items.active">
              <img src="../../assets/btn_up.png" alt="" v-show="items.active">
            </span>
          </div>
          <div class="screen-content screen-btn" :class="{'show-more': items.active}">
            <div v-for="(item, indexChild) in items.value.split(',')" :key="indexChild">
              <button type="button" @click="chooseScreen(item, $event)">{{item}}</button>
            </div>
          </div>
        </div>
      </div>
      <yd-flexbox class="bottom-btn">
        <button type="button" class="reset" @click="reset()">重置</button>
        <button type="button" class="comfirm" @click="comfirm()">确认</button>
      </yd-flexbox>
    </yd-popup>

    <!-- 内容 -->
    <w-empty v-if="!goodsList.length"></w-empty>
    <yd-infinitescroll :callback="loadList" ref="infiniteScroll" v-else>
      <div slot="list">
        <!-- 商品列表 -->
        <article class="goods-list">
          <yd-list theme="1">
            <yd-list-item v-for="(goods, index) in goodsList" :key="index" @click.native="onTo(goods.id)">
              <img slot="img" v-lazy="goods.path">
              <p slot="title" class="goods-name">{{goods.goods_name}}</p> 
              <p slot="other" class="yd-price"><em>¥</em>{{goods.goods_price | currency}}</p>
            </yd-list-item>
          </yd-list>
        </article>
      </div>
      <!-- 数据全部加载完毕显示 -->
      <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <p slot="loadingTip">加载中...</p>
    </yd-infinitescroll>

    <!-- 遮罩层 -->
    <div :class="{mask: isShow}" @click="showPopup()"></div>
  </yd-layout>
</template>

<script>
  import { apiGetGoodsList } from 'js/api'
  export default {
    data() {
      return {
        getGoodsListParams: { // 搜索需要参数
          orderBy: 'goods_current_price',
          orderType: 'desc',
          goods_current_price_floor: '',
          goods_current_price_ceiling: '',
          properties: '',
          currentPage: 1,
          classId: ''
        },
        goodsList: [], // 搜索结果列表
        isShow: false,
        show: false,
        screenList: [],
        rowId: -1,
        activeId: [],
        active: '',
        lowest: '',
        highest: '',
        title: ''
      }
    },
    created() {
      this.title = this.$route.params.name
      this.getGoodsListParams.classId = this.$route.params.id
      this.getGoodsList()
    },
    methods: {
      onChangeTab(hash) {
        this.getGoodsListParams.orderBy = hash
      },

      // 跳转到详情
      onTo(id) {
        this.$router.push(`/goods/${id}`)
      },

      // 获取商品列表
      getGoodsList() {
        apiGetGoodsList(this.getGoodsListParams).then(data => {
          const oData = data || {}
          this.goodsList = this.goodsList.concat(oData.goodsList)
          if (this.getGoodsListParams.currentPage >= oData.totalPage) {
            this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.loadedDone')
            return
          }
          this.$refs.infiniteScroll && this.$refs.infiniteScroll.$emit('ydui.infinitescroll.finishLoad')
          this.getGoodsListParams.currentPage++
        })
      },

      // 基础条件筛选
      getGoodsListType(type) {
        this.getGoodsListParams.orderBy = type
        this.getGoodsListParams.currentPage = 1
        this.goodsList = []
        this.getGoodsList()
      },

      // 价格排序
      onSearchByPrice(order) {
        this.getGoodsListParams.orderBy = order
        this.getGoodsListParams.currentPage = 1
        if (this.getGoodsListParams.orderType == 'desc') {
          this.getGoodsListParams.orderType = 'asc'
        } else {
          this.getGoodsListParams.orderType = 'desc'
        }
        this.goodsList = []
        this.getGoodsList()
      },

      // 点击显示弹窗
      showPopup() {
        if (this.isShow == false) {
          this.isShow = true
        } else {
          this.isShow = false
        }
      },
      // 下拉加载
      loadList() {
        this.getGoodsList()
      },
      // 选择筛选条件
      chooseScreen(name, el) {
        var chooseBtn = el.currentTarget
        if (chooseBtn.className == 'active') {
          this.active = ''
          chooseBtn.setAttribute('class', this.active)
          this.activeId = this.activeId.filter((v) => { return v != name })
        } else {
          this.active = 'active'
          chooseBtn.setAttribute('class', this.active)
          this.activeId.push(name)
        }
      },

      // 重置
      reset() {
        var tags = document.querySelectorAll('.screen-btn .active')
        // tags.removeAttribute('class')
        tags.forEach(item => {
          item.className = ''
        })
        this.lowest = ''
        this.highest = ''
        this.getGoodsListParams.goodsPro = ''
        this.getGoodsListParams.goodsCurrentPriceFloor = this.lowest
        this.getGoodsListParams.goodsCurrentPriceCeiling = this.highest
        this.getGoodsList()
      },

      // 确认筛选
      comfirm() {
        this.getGoodsListParams.goodsPro = this.activeId.join(',')
        this.getGoodsListParams.goodsCurrentPriceFloor = this.lowest
        this.getGoodsListParams.goodsCurrentPriceCeiling = this.highest
        this.getGoodsList()
        this.show = false
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  @import '../../scss/_animate.scss';
  .goods-list {
    background: #fff;
    .yd-list-item {
      div {
        border: 1px solid #ddd;
      }
      .yd-list-mes {
        padding: 0.15rem 0.2rem;
        border-top: 0px;
        text-align: center;
        color: #ef5c6e;
        div {
          border: 0;
          text-align: center;
        }
      }
    }
  }
  @keyframes zoomInDown {
    from {
      transform: translate3d(80%, -3.38rem, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  .zoomInDown {
    animation-name: zoomInDown;
    display: block !important;
  }
  .yd-navbar-item {
    overflow: inherit;
  }
  .m-srh-box {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    padding-left: 0;
    height: .5rem;
    border-radius: .5rem;
    background: #f4f4f4;
    top: 0.19rem;
    .yd-cell-right {
      padding-left: .1rem;
      min-height: 0;
    }
  }
  .m-goods-srh {
    .srh-text {
      // padding-right: .2rem;
      color: #666;
      font-size: .2rem;
      position: relative;
      &>.yd-badge {
        position: absolute;
        top: -3px;
        left: -5px;
        font-size: 0.2rem;
      }
    }
  }
  .m-search-tab-list {
    @include flex(around);
    padding: 0 .24rem;
    height: .88rem;
    background: #fff;
    text-align: center;
    // margin-top: 0.1rem;
    border-top: 1px dashed #EFEFEF;
    button {
      position: relative;
      height: .88rem;
      border-bottom: 2px solid transparent;
      color: #666;
      &.active {
        color: #f00385;
        border-bottom-color: #f00385;
      }
      &.year {
        span {
          position: absolute;
          right: -12px;
          border: 5px solid transparent;
        }
        .t {
          top: .22rem;
          border-bottom-color: #c6c6c6;
          &.cur {
            border-bottom-color: #f00385;
          }
        }
        .b {
          top: .47rem;
          border-top-color: #c6c6c6;
          &.cur {
            border-top-color: #f00385;
          }
        }
      }
    }
  }
  .m-search-tab-list.screen {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #E1E1E1;
    button {
      border-bottom: none;
      span {
        position: absolute;
        right: -18px;
        border: 5px solid transparent;
      }
      .t {
        top: .22rem;
        border-bottom-color: #c6c6c6;
        &.cur {
          border-bottom-color: #f00385;
        }
      }
      .b {
        top: .47rem;
        border-top-color: #c6c6c6;
        &.cur {
          border-top-color: #f00385;
        }
      }
      img {
        width: .28rem;
        vertical-align: middle;
      }
    }
  }
  .store {
    margin-bottom: 0.1rem;
  }
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .1);
    z-index: 10;
  }
  .yd-popup-content {
    overflow-y: auto;
    .popup-scroll {
      padding-bottom: 0.82rem;
      .screen-row {
        padding: 0.32rem 0.22rem;
        border-bottom: 1px solid #F3F3F3;
        &:last-child {
          border-bottom: none
        }
        .screen-title {
          font-size: 0.28rem;
          font-weight: bold;
          margin-bottom: 0.28rem;
          overflow: hidden;
          span {
            font-weight: normal;
            float: right;
            img {
              width: 0.24rem;
            }
          }
        }
        .screen-content {
          input {
            padding: 0.2rem 0.5rem;
            background: #F5F5F5;
            font-size: 0.24rem;
            width: 1.9rem;
            height: 0.66rem;
            text-align: center;
            border-radius: 0.08rem
          }
          .line {
            display: inline-block;
            width: 0.18rem;
            border: 1px solid #1F1F1F;
            vertical-align: super;
          }
        }
        .screen-content.screen-btn {
          overflow: hidden;
          height: 1.44rem;
          div {
            width: 33.3333333333%;
            text-align: center;
            float: left;
            margin-bottom: 0.2rem;
            button {
              width: 1.95rem;
              height: 0.52rem;
              border-radius: 0.08rem;
              border: 1px solid #D2D2D2;
              font-size: 0.2rem;
              &.active {
                border-color: #F00384;
                color: #F00384;
              }
            }
          }
        }
        .screen-content.screen-btn.show-more {
          height: auto;
        }
      }
    }
    .bottom-btn {
      position: fixed;
      bottom: 0;
      width: 100%;
      button {
        width: 100%;
        height: 0.82rem;
        border-top:1px solid #CACACA;
        &.reset{
          background: #fff;
        }
        &.comfirm{
          background: #F00384;
          color: #fff;
        }
      }
    }
  }
  .item-footer {
    padding-top: 0;
    div {
      font-size: 0.2rem;
      padding: 0.04rem 0.07rem;
      border: 1px solid #F00384;
      color: #F00384;
      &.orderGoods {
        color: #F6A05F;
        border-color: #F6A05F;
      }
    }
  }
</style>